<template>
    <div class="weekend">
        <div class="ground-title">
            <h2 class="title">周末去哪儿</h2>
        </div>
        <ul class="ground-list">
            <li class="item border-bottom" v-for="item of weekendlist" :key="item.id">
                <div class="item-img">
                    <img class="item-img-content" :src="item.imgUrl" alt="">
                </div>
                <div class="item-info">
                    <div class="item-title">{{item.title}}</div>
                    <div class="feature">{{item.feature}}</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    weekendlist: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixin.styl'
  .title
    line-height .8rem
    padding-left .26rem
    color #212121
  .ground-list
    background $bgColorFff
    .item
      padding-bottom .2rem
      .item-img
        width 100%
        height 0
        overflow hidden
        padding-bottom 36.4%
        .item-img-content
          display inline-block
          width 100%
      .item-info
        padding: .14rem .2rem .2rem .2rem;
        .item-title
          font-size .28rem
          line-height .48rem
          padding-right 1.4rem
          ellipsis()
        .feature
          font-size .24rem
          line-height .42rem
          padding-right 1.4rem
          ellipsis()
</style>
